<template>
	<view class="gui-bg-white gui-border-radius gui-components-list gui-dark-bg-level-2 gui-margin-top">
		<gui-accordion-card :status="status" @open="handleOpen" @close="handleClose">
			<template v-slot:title>
				<view class="gui-flex gui-nowrap gui-components-list-title gui-space-between">
					<text class="gui-components-list-text gui-primary-text">{{ title }}</text>
					<text v-if="!status" class="gui-components-list-icon gui-icons">&#xe69d;</text>
					<text v-if="status" class="gui-components-list-icon gui-icons">&#xe638;</text>
				</view>
			</template>
			<template v-slot:body>
				<view class="charts-box">
					<qiun-data-charts :type="chartType" :opts="opts" :chartData="chartData" :ontouch="chartTouch" />
				</view>
			</template>
		</gui-accordion-card>
	</view>
</template>

<script setup>
	import { defineProps,defineEmits,createApp } from 'vue';
	import { onShow } from '@dcloudio/uni-app'
	import guiAccordionCard from '@/Grace6/components/gui-accordion-card.vue'
	const app = createApp();
	const emit = defineEmits(['open','close']);
	const props  = defineProps({
		status: {
			type: Boolean,
			default: false,
		},
		currentIndex: {
			type: Number,
			default: 0
		},
		title: {
			type: String,
			required: true,
		},
		opts: {
			type: Object,
			default: () => ({}),
		},
		chartData: {
			type: Object,
			default: () => ({}),
		},
		chartType: {
			type: String,
			default: 'line'
		},
		chartTouch: {
			type: Boolean,
			default: true
		}
	});
	
	function handleOpen(){
		console.log("打印："+props.currentIndex)
		console.log(props.title)
		console.log(props.opts)
		console.log(props.currentIndex)
		emit('open', props.currentIndex);
	}
	
	function handleClose(){
		console.log("关闭"+props.status)
		console.log(props.currentIndex)
		emit('close');
	}
	
	app.component({
		guiAccordionCard
	})
</script>

<style scoped>
	
</style>